<style lang="scss" scoped>
.user {
    width: 100vw;
    background: url("../../static/images/index/index_bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 99.9%;
    overflow: auto;
    .scroll-Y {
        width: 100%;
        padding: 0.8rem;
        box-sizing: border-box;
    }
}
.user_top {
    display: flex;
    justify-content: space-between;
    margin: 0.5rem;
    .msg {
        position: relative;
        padding: 0.2rem 0.4rem;
        border: 1px solid #ccc;
        border-radius: 0.5rem;
        .u-badge {
            font-size: 0.2rem !important;
        }
    }
}
.user_info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    .left {
        margin-right: 1rem;
        image {
            width: 3rem;
            border-radius: 50%;
        }
    }
    .center {
        flex: 1;
        .nickname {
            font-size: 1rem;
            display: flex;
            align-items: center;
            image {
                width: 4rem;
                margin-left: 0.2rem;
            }
        }
        .account {
            font-size: 0.8rem;
            color: #666666;
            margin-top: 0.2rem;
        }
    }
    .right {
        .u-icon {
            font-size: 1.5rem;
        }
    }
}
.user_noney {
    margin-top: 1rem;
    width: 100%;
    .top_noney {
        height: 5rem;
        background: url("../../static/images/user/userbc.png");
        background-size: 100% 100%;
        display: flex;
        justify-content: space-between;
        padding: 1rem 1.5rem;
        color: #fff;
        align-items: center;
        .left {
            .left_text {
                font-size: 0.6rem;
                margin-bottom: 0.2rem;
            }
            .left_nomey {
                font-size: 1.5rem;
                font-weight: 600;
            }
        }
        .right {
            .button {
                color: #000;
                background-color: #ecc691;
            }
        }
    }
    .botton_shouyi {
        margin: 0.5rem 0;
        display: flex;
        justify-content: space-between;
        background-color: #fff;
        padding: 1rem 0.5rem;
        border-radius: 0.5rem;
        .list {
            flex: 1;
            text-align: center;
            .num {
                font-size: 1.2rem;
                font-weight: 600;
            }
            .text {
                font-size: 0.6rem;
                color: #666666;
            }
        }
        .xian {
            width: 1px;
            height: 1rem;
            background-color: #ccc;
        }
    }
}
.user_nav {
    display: flex;
    justify-content: space-between;
    .left {
        width: 48%;
        image {
            width: 100%;
        }
    }
    .right {
        width: 48%;
        image {
            width: 100%;
        }
    }
}
.footer_list {
    margin-top: 0.8rem;
    .list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.7rem 1rem;
        background-color: #fff;
        border-radius: 0.5rem;
        margin-bottom: 0.5rem;
        .left {
            margin-right: 0.5rem;
            display: flex;
            align-items: center;
            image {
                width: 1rem;
            }
        }
        .center {
            flex: 1;
        }
    }
}
</style>

<template>
    <view class="user">
        <u-navbar-s></u-navbar-s>
        <view class="scroll-Y">
            <!-- top消息 -S -->
            <view class="user_top">
                <view></view>
                <view class="msg" @click="gopathmsg">
                    <u-badge type="error" :count="state.noticeDetail?.nums || 0" :offset="[-12, -12]"></u-badge>
                    <u-icon name="chat"></u-icon>消息
                </view>
            </view>
            <!-- top消息 -E -->
            <!-- 个人信息 -S -->
            <view class="user_info">
                <view class="left">
                    <image :src="state.user_info?.userInfo?.avatar || '../../static/images/icon/loading.gif'" mode="widthFix" />
                </view>
                <view class="center">
                    <view class="nickname">
                        <text>{{ state.user_info?.userInfo?.nickname || "" }}</text>
                        <image v-if="state.user_info?.userInfo?.user_type == 1" src="../../static/images/user/creator.png" mode="widthFix" />
                        <image v-if="state.user_info?.userInfo?.user_type == 2" src="../../static/images/user/tuan.png" mode="widthFix" />
                        <image v-if="state.user_info?.userInfo?.user_type == 3" src="../../static/images/user/institution.png" mode="widthFix" />
                    </view>
                    <view class="account">
                        {{ state.user_info?.userInfo?.account || "" }}
                    </view>
                </view>
                <view class="right">
                    <u-icon name="setting" @click="gopath"></u-icon>
                </view>
            </view>
            <!-- 个人信息 -E -->
            <!-- 个人中心 -S -->
            <view class="user_noney">
                <view class="top_noney">
                    <view class="left">
                        <view class="left_text">可提现金额（元）</view>
                        <view class="left_nomey">{{ state.user_info?.available_amount || "0.00" }}</view>
                    </view>
                    <view class="right">
                        <u-button hover-class="none" class="button" shape="circle" size="medium" @click="gopathWallet">我的钱包</u-button>
                    </view>
                </view>
                <view class="botton_shouyi">
                    <view class="list">
                        <view class="num">{{ state.userInfo?.total_revenue || "0.00" }}</view>
                        <view class="text">总收益</view>
                    </view>
                    <view class="xian"></view>
                    <view class="list">
                        <view class="num">{{ state.userInfo?.today_income || "0.00" }}</view>
                        <view class="text">今日预估</view>
                    </view>
                    <view class="xian"></view>
                    <view class="list">
                        <view class="num">{{ state.userInfo?.yesterday_income || "0.00" }}</view>
                        <view class="text">昨日预估</view>
                    </view>
                    <view class="xian"></view>
                    <view class="list">
                        <view class="num">{{ state.userInfo?.this_month_income || "0.00" }}</view>
                        <view class="text">本月预估</view>
                    </view>
                </view>
            </view>
            <!-- 个人中心 -E -->
            <!-- 导航 -S -->
            <view class="user_nav">
                <view class="left">
                    <image src="../../static/images/user/invite.png" mode="widthFix" />
                </view>
                <view class="right">
                    <image src="../../static/images/user/creatorImg.png" mode="widthFix" />
                </view>
            </view>
            <!-- 导航 -E -->
            <!-- footer_list -S -->
            <view class="footer_list">
                <view class="list" v-for="(item, index) in state.footer_list" :key="index" @click="footer_listgopath(item)">
                    <view class="left">
                        <image :src="item.icon" mode="widthFix" />
                    </view>
                    <view class="center">{{ item.name }}</view>
                    <view class="right">
                        <u-icon v-if="item.rigthFlag" name="arrow-right"></u-icon>
                        <text v-else>{{ item.righttext || "" }}</text>
                    </view>
                </view>
            </view>
            <!-- footer_list -E -->
        </view>
    </view>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { onLoad, onShow, onPullDownRefresh } from "@dcloudio/uni-app";
import { getUserInfo, noticeDetail } from "@/api/user";
const state = reactive<{
    user_info: object;
    footer_list: Array<object>;
    noticeDetail: object;
}>({
    noticeDetail: {},
    footer_list: [
        {
            name: "工具中心",
            page: "",
            icon: "../../static/images/user/gongju.png",
            rigthFlag: true,
            righttext: "",
        },
        {
            name: "我的推广",
            page: "",
            icon: "../../static/images/user/promotion.png",
            rigthFlag: true,
            righttext: "",
        },
        {
            name: "帮助手册",
            page: "",
            icon: "../../static/images/user/help.png",
            rigthFlag: true,
            righttext: "",
        },
        {
            name: "用户反馈",
            page: "",
            icon: "../../static/images/user/fankui.png",
            rigthFlag: true,
            righttext: "",
        },
        {
            name: "关于我们",
            page: "",
            icon: "../../static/images/user/us.png",
            rigthFlag: true,
            righttext: "",
        },
        {
            name: "下载有米星球APP",
            page: "",
            icon: "../../static/images/user/xiazaiapp.png",
            rigthFlag: true,
            righttext: "",
        },
    ],
    user_info: {},
});
onShow(() => {
    localData();
    getData().then(() => {
        localData();
    });
});
const getData = async () => {
    const user_info = await getUserInfo();
    uni.setStorageSync("user_info", user_info);
    const noticeDetailobj = await noticeDetail();
    state.noticeDetail = noticeDetailobj || {};
};
// 获取数据
const localData = () => {
    const user_info = uni.getStorageSync("user_info") || {};
    state.user_info = user_info || {};
};
// 跳转个人设置
const gopath = () => {
    uni.navigateTo({
        url: "/pages/user/setuserinfo",
    });
};
// 跳转我的消息列表
const gopathmsg = () => {
    uni.navigateTo({
        url: "/pages/message/message",
    });
};
// 跳转我的钱包
const gopathWallet = () => {
    uni.navigateTo({
        url: "/pages/user/Wallet",
    });
};
// footer_listgopath
const footer_listgopath = (item) => {
    switch (item.name) {
        case "用户反馈":
            uni.navigateTo({ url: "/pages/feedback/feedback" });
            break;
        default:
            break;
    }
};
</script>
